<template>
  <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
    <span>{{stauts}}</span>
    <textarea v-model="msg" title="输入"></textarea>
    <button @click="test01">发送</button>
    <hr/>
    <textarea title="回信" v-model="getMsg"></textarea>
  </div>
</template>

<script setup>
import {ref} from "vue";

const ws = new WebSocket("ws://localhost:8080/websocket/10")
const msg = ref("hello!")
const stauts = ref("未连接")
const getMsg = ref("")
ws.onopen = () => {
  stauts.value = "已连接";
  console.log("链接成功")
}
ws.onmessage = (evt) => {
  console.log(evt.data)
  getMsg.value = evt.data;
}
ws.onclose = () => {
  stauts.value = "连接关闭";
  console.log("链接关闭")
}
const test01 = ()=>{
  ws.send(msg.value)
  alert("发送成功");
}
</script>

<style scoped>

</style>